<template>
	<view class="page_bg">
		<uv-navbar title="仓库管理" :autoBack="false" :placeholder="true" bgColor="rgba(0,0,0,0)" @rightClick="rightClick" @leftClick="leftClick">
			<template v-slot:right>
				<view class="uv-nav-slot">
					<uv-icon name="clock" size="36rpx"></uv-icon>
				</view>
			</template>
		</uv-navbar>

		<view class="store_search">
			<uv-icon name="search" color="#8C8C8C" size="40rpx"></uv-icon>
			<input class="input" type="text" v-model="sarchVal" placeholder="请输入货物名称" />
			<view class="btn" @click="sousuo()">
				{{$t('搜索')}}
			</view>
		</view>

		<view class="place_site">
			<view class="name">
				{{$t('当前仓库')}}：
			</view>
			<view class="text">
				{{ w_name }}
			</view>
			<image class="ico" src="/static/img/ico_line5.png" mode="widthFix"></image>
		</view>

		<view class="cargo_list">
			<view class="cargo_item" v-for="(item, index) in list" :key="index">
				<view class="cargo_item_info">
					<image class="cargo_ph" src="/static/img/ph_2.png" mode="aspectFill"></image>
					<view class="cargo_info">
						<view class="title">
							{{ item.goods }}
						</view>
						<view class="info_item">
							<view class="name">
								{{$t('重量')}}(kg)
							</view>
							<view class="text">
								{{ item.weight }}
							</view>
						</view>
						<view class="info_item">
							<view class="name">
								{{$t('体积')}}(m³)
							</view>
							<view class="text">
								{{ item.volume }}
							</view>
						</view>
						<view class="info_item">
							<view class="name">
								{{$t('客户名称')}}
							</view>
							<view class="text">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="cargo_btn">
					<view class="name">
						{{$t('件数')}}：{{ item.number }} <br> {{$t('剩余')}}：{{ item.free_number }}
					</view>
					<view class="btn" @click="chuku(item)">
						{{$t('出库')}}
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
import { stock_lists } from '@/api/basic.js'

export default {
	data() {
		return {
			w_id: '',
			w_name: '',
			storage_id: '',
			sarchVal: '',
			list: [],

		}
	},
	onPullDownRefresh() {
		this.page = 1
		this.lists(0)
	},
	onLoad(options) {
		if (options.w_id) {
			this.w_id = options.w_id
			this.storage_id = options.storage_id
			this.w_name = options.w_name
		}
		console.log("============>",this.w_id,this.storage_id,this.w_name)
	},
	onShow(){
		this.lists(0)
	},
	methods: {
		sousuo() {
			this.lists(0)
		},
		lists(index) {
			var that = this
			uni.showLoading({
				title: 'loading...',
				mask: true
			})
			stock_lists({
				w_id: this.w_id,
				user_id: uni.getStorageSync('user_id'),
				'page': 1,
				'limit': 1000,
				'keyword': this.sarchVal, 'type': index
			}).then(res => {
				that.list = res.data.data.data
				uni.stopPullDownRefresh()
				uni.hideLoading()
			})
		},
		rightClick() {
			uni.redirectTo({
				url: '/pages/cargoHistory/cargoHistory'
			});
			
		},
		leftClick(){
			uni.redirectTo({
			 url: '/pages/storePlace/storePlace?id=' + this.w_id + '&name=' + this.w_name
			});
		},
		chuku(item) {
			uni.setStorageSync('items',JSON.stringify(item))
			uni.redirectTo({
				url: `/pages/storageOut/storageOut?w_id=${this.w_id}&storage_id=${this.storage_id}&w_name=${this.w_name}`
			});
			
		}
	}
}
</script>

<style lang="scss">
.cargo_list {
	padding: 0 24rpx;

	.cargo_item {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;

		.cargo_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16rpx;

			.name {
				flex-shrink: 0;
				width: 200rpx;
				font-size: 24rpx;
				line-height: 30rpx;
				padding-left: 14rpx;
				margin-right: 20rpx;
			}

			.btn {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
				border-radius: 40rpx;
				color: #fff;
				font-weight: bold;
			}
		}

		.cargo_item_info {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;

			.cargo_ph {
				flex-shrink: 0;
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}

			.cargo_info {
				width: 100%;

				.title {
					font-size: 30rpx;
					line-height: 40rpx;
					font-weight: bold;
				}

				.info_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;

					.name {
						color: #8C8C8C;
						font-size: 22rpx;
						line-height: 30rpx;
					}

					.text {
						color: #111;
						font-size: 24rpx;
						line-height: 30rpx;
					}
				}
			}
		}
	}
}

.page_bg {
	background: url('/static/img/bg_2.png') no-repeat center top;
	background-size: 100% auto;
	padding-top: 40px;
}

.place_site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	height: 100rpx;

	.name {
		flex-shrink: 0;
		color: #999;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.text {
		width: 100%;
		color: #222;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.ico {
		flex-shrink: 0;
		width: 30rpx;
	}
}

.store_search {
	height: 80rpx;
	background: #fff;
	border-radius: 50rpx;
	margin: 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4rpx 4rpx 4rpx 24rpx;
	padding-top:0px;
	.input {
		width: 100%;
		padding-left: 10rpx;
		font-size: 26rpx;
	}

	.btn {
		flex-shrink: 0;
		background: #278AFF;
		color: #fff;
		width: 134rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
}
</style>
